<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input v-model="qname" placeholder="请输入问卷名称" suffix-icon="search" style="width: 200px"/>
      <el-button id="21" type="primary" style="margin-left: 10px" @click="search">查询</el-button>
      <el-button id="22" type="success" @click="reset">重置</el-button>
      <el-button id="23" type="primary" style="margin-left: 10px" @click="add">新增问卷</el-button>
    </div>

    <el-scrollbar>
      <el-table :data="tableData">
        <el-table-column prop="qid" label="问卷名称" width="100" align="center"/>
        <el-table-column prop="status" label="问卷状态" width="200" align="center"/>
        <el-table-column prop="start" label="问卷创建时间" align="center"/>
        <el-table-column prop="end" label="问卷结束时间" align="center"/>
        <el-table-column prop="operation" label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="success" @click="edit(scope.row)">编辑问卷</el-button>
            <el-button size="small" type="success" @click="look(scope.row)">查看问卷</el-button>
            <el-button size="small" type="success" @click="dele(scope.row)">删除问卷</el-button>
            <el-button size="small" type="success" @click="initial(scope.row)">个性化问卷</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <el-dialog v-model="centerDialogVisible" title="请填写新问卷信息" width="30%" center>
      <el-form :model="form" label-width="120px">
        <el-form-item label="问卷结束时间">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
            <el-time-picker v-model="value2" placeholder="请选择时刻" />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import router from "@/router";
import request from "@/util/request";

export default {
  name: "Questionnaire",
  data() {
    return {
      tableData: [],
      qname: '',
      centerDialogVisible: false,
      form: {
        end: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2:''
    }
  },
  methods: {
    initial(row) {
      this.$cookies.set('qid', row.qid)
      router.push("/Individu")
    },
    search() {
      document.getElementById("21").blur();
      this.loadPost()
    },
    loadPost() {
      if (this.qname === '') {
        let formData = new FormData();
        let uid = this.$cookies.get('value').uid
        console.log(uid)
        formData.append("uid", uid);
        this.$axios.post("http://localhost:8090/questionnaire/queryQuesByUid",formData).then(res => {
          console.log(res)
          this.tableData = res.data.data
        });
      } else {
        let formData = new FormData();
        formData.append("qid", this.qname);
        this.$axios.post("http://localhost:8090/questionnaire/findQuestionnaire", formData).then(res => {
          this.tableData = res.data.data
          console.log(res)
        });
      }
    },
    add() {
      document.getElementById("23").blur();
      this.centerDialogVisible = true;
    },
    release(row) {
      ElMessage({
        message: '发布成功，问卷链接为http://localhost:8080/#/LookQuestionnaire',
        type: 'success',
      })
    }, look(row) {
      this.$cookies.set('qid', row.qid)
      router.push('/LookQuestionnaire')
    },
    reset() {
      document.getElementById("22").blur();
      let formData = new FormData();
      formData.append("uid", this.$cookies.get('uid'))
      this.$axios.get("http://localhost:8090/questionnaire/findQuestionnaireByUid", formData).then(res => {
        console.log(res)
        this.tableData = res.data.data
      });
    },
    save() {
      this.centerDialogVisible = false
      let formData = new FormData();
      formData.append("uid", "20200001")
      formData.append("status", "未开启")
      var newDate = "";
      console.log(this.value2)
      var year = this.value1.getFullYear();
      var month = this.value1.getMonth() + 1 > 9 ? this.value1.getMonth() + 1 : "0" + (this.value1.getMonth() + 1);
      var day = this.value1.getDate() > 9 ? this.value1.getDate() : "0" + this.value1.getDate();
      var hour = this.value2.getHours() > 9 ? this.value2.getHours() : "0" + this.value2.getHours();
      var min = this.value2.getMinutes() > 9 ? this.value2.getMinutes() : "0" + this.value2.getMinutes();
      var sec = this.value2.getSeconds() > 9 ? this.value2.getSeconds() : "0" + this.value2.getSeconds();
      newDate = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
      console.log(newDate)
      this.$cookies.set('end', newDate);
      router.push('/AddQuestionnaire')
    },
    dele(row) {
      let formData = new FormData();
      formData.append("qid", row.qid)
      this.$axios.post("http://localhost:8090/questionnaire/deleteQuestionnaire", {
        qid: row.qid
      }).then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: '操作成功！',
            type: 'success',
          })
          this.loadPost()
        } else {
          ElMessage({
            message: '删除失败！',
            type: 'danger',
          })
          this.loadPost()
        }
      })
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>